<template>
 <div class="main">
  <div class="steps">
   <div class="left">
    <img src="../../../../assets/icon5.png" alt="">

    <h6>{{ $t('custody.steps.h6_1') }}</h6>
    <p>{{ $t('custody.steps.p_1') }}</p>
   </div>

   <div class="center">
    <div class="top">
     <div class="tips">
      <h6>{{ $t('custody.steps.step_h6_1') }}</h6>
      <p>{{ $t('custody.steps.step_p_1') }}</p>
     </div>

     <div class="dft">
      <img src="../../../../assets/icon6.png" alt="">

      <h6>{{ $t('custody.steps.h6_2') }}</h6>

      <p v-html="$t('custody.steps.p_2')"></p>
     </div>

     <div class="tips">
      <h6>{{ $t('custody.steps.step_h6_2') }}</h6>
      <p>{{ $t('custody.steps.step_p_2') }}</p>
     </div>
    </div>
    <p>{{ $t('custody.steps.t1') }}</p>
   </div>

   <div class="right">
    <img src="../../../../assets/icon7.png" alt="">

    <h6>{{ $t('custody.steps.t2') }}</h6>

    <p>{{ $t('custody.steps.t3') }}</p>
   </div>
  </div>

  <p>{{ $t('custody.steps.t4') }}</p>
 </div>
</template>

<script>
export default {
 name: "Steps"
}
</script>

<style scoped lang="scss">
.main {
 text-align: center;
 padding: 100px 0;

 >p {
  padding-top: 10px;
  color: #000000;
  font-size: 16px;
 }

 .steps {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  img {
   width: 100px;
  }

  .left {
   position: absolute;
   top: 0;
   padding-bottom: 10px;
   left: 0;
   transform: translateX(-50%);
   text-align: center;
   background-color: #ffffff;

   h6 {
    font-size: 18px;
   }
   p {
    font-size: 22px;
    padding-bottom: 4px;
   }
  }

  .center {
   margin: 0 auto;
   padding: 0 30px 10px;
   border: 1px dotted #0D4FA5;
   border-top: 0;

   >p {
    color: #000000;
    font-size: 16px;
   }

   .top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;

    .tips {
     padding: 0 30px;
     text-align: center;

     h6 {
      padding: 6px 20px;
      border-bottom: 1px dotted #0D4FA5;
      font-size: 16px;
     }
     p {
      color: #6E6E6E;
      font-size: 14px;
      max-width: 60%;
      margin: 0 auto;
      padding: 6px 0;
     }
    }

    .dft {
     text-align: center;
     h6 {
      font-size: 18px;
     }
     p {
      font-size: 22px;
      padding-bottom: 4px;
     }
    }
   }
  }

  .right {
   position: absolute;
   top: 0;
   padding-bottom: 10px;
   right: 0;
   transform: translateX(50%);
   text-align: center;
   background-color: #ffffff;

   h6 {
    font-size: 18px;
   }
   p {
    font-size: 22px;
    padding-bottom: 4px;
   }
  }
 }
}
</style>
